﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>页面名</title>
    <style>
        .mytext {
            background: #ccc;
            font-family: 'Times New Roman', Times, serif;
            font-size: 60px;
            font-weight: 800;
        }

        ul {
            list-style: none;
        }

        .mytable {
            background: #00ff90;
            width: 100%;
        }

        .user_type {
            display: block; /*把当前标签变成  块级  元素*/
        }

        .hreo_area {
            display: inline;
        }

        .line {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .mya{
            color:#ff0000;
        }

        a{
            color:#ff0000;
            font-size:20px;
            text-decoration:none;
        }

    </style>
</head>
<body>
    <!--：span i img   input
    块级元素:div p h5新标签

    1 文字
    这是一个很美好的hello<span class="mytext "> world</span>。。我和我的同学们一起来到了泽林学习PYTHON.
    <br />
    <i>hello world</i> this is a new text;

    2 段落
    <p>this is a new p;</p>
    <h1>111</h1>
    <h2>2222</h2>sdfadsfasdf;j
    <br />
    3 多媒体
    图片
    <div>
        <img src="img/ad/01.jpg" width="120" />
    </div>

    声音
    <audio controls="controls">
        <source src="media/01.mp3" type="audio/mpeg" />
    </audio>

    视频
    <div>
        <video controls="controls" width="100" height="100">
            <source src="media/v01.mp4" type="video/mp4" />
        </video>
    </div>

    <div>1111</div>

    <div>
        2222
        4 列表
        <div>
            无序列表
            <ul>
                <li> AAAAA</li>
                <li> BBBBB</li>
                <li> CCCCC</li>
            </ul>

            有序列表
            <ol>
                <li> DDDDD</li>
                <li> EEEEE</li>
                <li> FFFFF</li>
            </ol>

        </div>

    </div>

    <div>
        5 表格
        <div>
            <table class="mytable">
                <thead>
                    <tr>
                        <td>No.</td>
                        <td>Name</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.</td>
                        <td>Name</td>
                    </tr>
                    <tr>
                        <td>1.</td>
                        <td>TOM</td>
                    </tr>
                    <tr>
                        <td>2.</td>
                        <td>Lily</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>2.</td>
                        <td>Lily</td>
                    </tr>

                </tfoot>
            </table>
            <hr />
        </div>

        <div>
            6 下拉列表

            <div class="hreo_area">请选择英雄所在区域</div>
            <select>
                <option value="1">微信区</option>
                <option value="2">QQ区</option>

            </select>
            <select class="user_type">
                <option value="1">法师</option>
                <option value="2">坦克</option>
                <option value="3">刺客</option>
            </select>


        </div>-->
    <!--<div class="line">
        7 按钮
        <button onclick="clickMe(100)">click me</button>
        onclick：单击事件
        <input type="button" value="hello"   onclick="clickMe(200)"/>

    </div>-->


    <div class="line">
        8 表单
        插件

        <form>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名" /></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码" /></td>
                </tr>
                <tr>
                    <td>颜色：</td>
                    <td><input type="color" /></td>
                </tr>
                <tr>
                    <td>日期：</td>
                    <td><input type="date" /></td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="number" /></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>女：<input type="radio" value="woman" name="sex" /> 男：<input type="radio" value="man" name="sex" /></td>
                </tr>

                <tr>
                    <td>爱好：</td>
                    <td>王者荣耀<input type="checkbox" value="mobile_lol" name="game" /> LOL<input type="checkbox" value="pc_lol" name="game" />  绝地求生<input type="checkbox" value="king_of_kill" name="game" /> </td>
                </tr>

                <tr>
                    <td>自我评价：</td>
                    <td><textarea></textarea></td>
                </tr>

                <tr>
                    <td>头像：</td>
                    <td><input type="file" /></td>
                </tr>

            </table>

            <div>
                <button>确定</button>
                <button>取消</button>

            </div>
        </form>


    </div>


    <div class="mya">
        9 超链接
        <a href="http://www.baidu.com" target="_blank">度娘一下</a>

        <hr />

        <a href="#" >首页</a>
        <a href="#" >关于我们</a>

        <hr />

        <a href="#" >a链接样式</a>


    </div>



</body>
</html>
<script>



    function clickMe(num) {
        //函数、方法
        alert(num);
    }

    function show(msg) {
        alert(msg);
    }

</script>
